<template>
  <div class="calc-root">
    <div class="calc-display">{{ display }}</div>
    <div class="calc-buttons">
      <button v-for="btn in buttons" :key="btn.text" :class="btn.class" @click="onButton(btn)">{{ btn.text }}</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const display = ref('0')
let first = null
let operator = null
let waitingForNext = false

const buttons = [
  { text: 'C', class: 'func' },
  { text: '←', class: 'func' },
  { text: '%', class: 'func' },
  { text: '/', class: 'op' },
  { text: '7' }, { text: '8' }, { text: '9' }, { text: '*', class: 'op' },
  { text: '4' }, { text: '5' }, { text: '6' }, { text: '-', class: 'op' },
  { text: '1' }, { text: '2' }, { text: '3' }, { text: '+', class: 'op' },
  { text: '0', class: 'zero' }, { text: '.' }, { text: '=', class: 'eq' }
]

function onButton(btn) {
  const t = btn.text
  if (t === 'C') {
    display.value = '0'; first = null; operator = null; waitingForNext = false
  } else if (t === '←') {
    if (!waitingForNext) display.value = display.value.length > 1 ? display.value.slice(0, -1) : '0'
  } else if ('0123456789'.includes(t)) {
    if (waitingForNext) { display.value = t; waitingForNext = false } else {
      display.value = display.value === '0' ? t : display.value + t
    }
  } else if (t === '.') {
    if (waitingForNext) { display.value = '0.'; waitingForNext = false }
    else if (!display.value.includes('.')) display.value += '.'
  } else if ('+-*/%'.includes(t)) {
    if (first !== null && !waitingForNext) {
      display.value = compute(first, display.value, operator)
    }
    first = display.value
    operator = t
    waitingForNext = true
  } else if (t === '=') {
    if (first !== null && operator) {
      display.value = compute(first, display.value, operator)
      first = null; operator = null; waitingForNext = true
    }
  }
}
function compute(a, b, op) {
  const x = parseFloat(a), y = parseFloat(b)
  if (op === '+') return (x + y).toString()
  if (op === '-') return (x - y).toString()
  if (op === '*') return (x * y).toString()
  if (op === '/') return y === 0 ? '错误' : (x / y).toString()
  if (op === '%') return (x % y).toString()
  return b
}
</script>
<style scoped>
.calc-root { width: 320px; margin: 0 auto; background: #f6f8fa; border-radius: 16px; box-shadow: 0 4px 24px #0002; padding: 24px 16px; }
.calc-display { height: 48px; background: #fff; border-radius: 8px; margin-bottom: 16px; font-size: 2rem; text-align: right; line-height: 48px; padding: 0 12px; box-shadow: 0 1px 4px #0001; }
.calc-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
button { height: 48px; font-size: 1.2rem; border: none; border-radius: 8px; background: #eaf1fb; cursor: pointer; transition: background 0.2s; }
button:hover { background: #d2e6fa; }
button.op { background: #0078d7; color: #fff; }
button.eq { background: #e81123; color: #fff; grid-column: span 1; }
button.zero { grid-column: span 2; }
button.func { background: #f0f0f0; color: #0078d7; }
</style> 